<script setup lang="ts">
import type { HotItemVO } from "@/types/homeType";

interface HotPanelProps {
   list: HotItemVO[];
}

defineProps<HotPanelProps>();

</script>

<template>
   <view class="hot">
      <view class="item" v-for="item in list" :key="item.id">
         <view class="title">
            <text class="title-text">{{ item.title }}</text>
            <text class="title-desc">{{ item.alt }}</text>
         </view>
         <navigator hover-class="none" :url="`/subPackages/recommend/recommend?type=${item.type}`" class="cards">
            <image class="image" mode="aspectFit" :src="img" v-for="(img,index) in item.pictures" :key="index"></image>
         </navigator>
      </view>
   </view>
</template>

<style scoped lang="scss">
.hot {
   display: flex;
   flex-wrap: wrap;
   min-height: 508rpx;
   margin: 20rpx 20rpx 30rpx;
   border-radius: 10rpx;
   background-color: #fff;

   .title {
      display: flex;
      align-items: center;
      padding: 24rpx 24rpx 0;
      font-size: 32rpx;
      color: #262626;
      position: relative;

      .title-desc {
         font-size: 24rpx;
         color: #7f7f7f;
         margin-left: 18rpx;
      }
   }

   .item {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 254rpx;
      border-right: 1rpx solid #eee;
      border-top: 1rpx solid #eee;

      .title {
         justify-content: start;
      }

      &:nth-child(2n) {
         border-right: 0 none;
      }

      &:nth-child(-n + 2) {
         border-top: 0 none;
      }

      .image {
         width: 150rpx;
         height: 150rpx;
      }
   }

   .cards {
      flex: 1;
      padding: 15rpx 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      image {
         margin-right: 3px;
      }
   }
}
</style>